<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品上架</title>
    <style>
        table {
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #151515;
            padding: 10px;
        }

        td input {
            width: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="名称" v-model.trim="iptName"><br>
        <input type="text" placeholder="数量" v-model.trim="iptNum">
        <button @click="putFn(iptName,iptNum)">提交</button>
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>名称</th>
                    <th>数量</th>
                    <th>UPDATE</th>
                    <th>DEL</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list">
                    <td>{{ item.id }}</td>
                    <td>
                        <input type="text" v-if="item.isUpdate" v-model="item.name">
                        <span v-else>{{ item.name }}</span>
                    </td>
                    <td>
                        <input type="text" v-if="item.isUpdate" v-model="item.num">
                        <span v-else>{{ item.num }}</span>
                    </td>
                    <td><button @click="updateFn(item)">{{ item.isUpdate ? "更新" : "修改"}}</button></td>
                    <td><button @click="delFn(item,index)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="../vue.js"></script>

    <script>
        let vw = new Vue({
            el: "#app",
            data: {
                iptName: '',
                iptNum: '',
                id: 1,
                list: [
                    // {
                    //     id: 1,
                    //     name: '小米',
                    //     num: 5
                    // },
                    // {
                    //     id: 2,
                    //     name: '华为',
                    //     num: 100
                    // }
                ]
            },
            methods: {
                // 增加商品
                putFn(iptName, iptNum) {
                    if (!this.iptName || !this.iptNum) {
                        alert("请输入正确的名称与数量！")
                    } else if (isNaN(this.iptNum)) {
                        alert("请输入正确的数量！")
                    } else {
                        let res = {
                            id: this.id++,
                            name: this.iptName,
                            num: this.iptNum,
                            isUpdate: false
                        };
                        this.list.push(res);
                        // 发布完后清空输入框文本
                        this.iptName = this.iptNum = "";
                    }
                },
                // 修改商品栏名称与数量
                updateFn(item) {
                    item.isUpdate = !item.isUpdate;
                },
                // 删除单行商品
                delFn(index) {
                    this.list.splice(index, 1);
                }
            }
        })
    </script>
</body>

</html>